<template>
  <div class="fold">
    <ul :key="select">
      <li :class="{anima:isActive}" @click.stop="showItem(item)"
        :style="{background:item.color,transitionDelay:`${(i+1)*0.1}s`}" v-for="(item,i) in rawdata" :key="i">
        <div>
          <span>{{item.name}}</span>
          <span>{{item.xuhao}}</span>
        </div>
        <img v-if="item.sub" :src="require(`@/assets/images/${!item.show?`show_enlarge@2x.png`:`show_narrow@2x.png`}`)"
          alt="">
        <ul @click.stop v-if="item.sub"
          :style="{maxHeight:item.show?`${item.sub.data.length*70}px`:'0','padding-bottom':item.show?'10px':'0'}">
          <li v-for="(sub,idx) in item.sub.data" :key="idx" :style="{background:item.sub.bgclr||'',color:item.sub.textColor}">
            <div @click.stop="showItem(sub)" :class="{bLine:item.bgclr}">
              <div>
                <span>{{sub.name}}</span>
                <span>{{sub.xuhao}}</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { data } from './data.js'
import { data as data2 } from './data2.js'
import { data as datab1 } from './datab1.js'

import browser from '@/utils/browser'


export default {
  props: ['isActive', 'select'],
  data() {
    return {
      isMobile: browser.mobile,
      rawdata:[]
    }
  },
  computed: {
  
  },

  watch:{
    select:{
      handler:function (newVal) {
        let tt = newVal == 1 ? data : (newVal == 2 ? data2 : datab1)
        let temp = tt.filter(item => {
          item.show = false
          return !item.isHide
        })
        this.rawdata = temp
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    goto(url) {
      if (!url) {
        return
      }
      if (this.$route.name == 'iframe') {
        this.$router.replace({ params: { id: url } })
        window.location.reload()
      }
      else {
        this.$router.push({
          name: 'iframe',
          params: {
            id: url
          }
        })
      }

      this.$emit('close')
    },
    showItem(item) {
      console.log(item)
      if (!item.sub) {
        this.goto(item.url)
        return
      }
      item.show = !item.show
      console.log(item.show);

    }
  }
}
</script>

<style lang="less" scoped>
.fold {
  width: 320px;
  min-height: 70px;
  max-height: 600px;
  background: linear-gradient(180deg, #00D3F6 0%, #234ED8 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  padding: 15px;
  border-radius: 4px;
  overflow: auto;

  .mb-top {
    position: relative;
    border-bottom: 1px solid #ECECEC;
    margin-bottom: 10px;
    padding: 10px 0 20px;
    font-weight: bold;

    >img {
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      top: 0px;
    }
  }

  >ul {
    color: #FFFFFF;
    height: 100%;
    overflow: hidden;

    >li {
      padding: 0 15px;
      line-height: 40px;
      border-radius: 4px;
      background: #231815;
      position: relative;
      margin-bottom: 10px;
      overflow: hidden;
      transform: translateX(150%);
      transition: none;

      >div {
        display: flex;
        justify-content: space-between;
      }

      >img {
        position: absolute;
        top: 18px;
        right: 15px;
        width: 10px;
      }

      >ul {
        max-height: 0;
        transition: all 0.3s ease;

        >li {
          line-height: 36px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          padding: 0 10px;
          font-size: 14px;
          overflow: hidden;
          cursor: pointer;

          &:not(:last-of-type) {
            margin-bottom: 10px;
          }

          >div {
            >div {
              display: flex;
              justify-content: space-between;

              &:not(:last-of-type) {
                border-bottom: 1px solid rgba(255, 255, 255, 0.4);
              }
            }
          }

          .bLine {
            >div {
              &:not(:last-of-type) {
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
              }
            }
          }
        }
      }
    }

    .anima {
      transform: translateX(0);
      transition: ease .3s transform;
    }
  }
}

@media screen and (max-width: 500px) {
  .fold {
    max-height: calc(100vh - 70px);
  }

}
</style>